<!--
 * @Author: your name
 * @Date: 2020-12-08 14:48:21
 * @LastEditTime: 2021-02-22 17:22:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\coupons\index.vue
-->
<template>
  <div class="w1200auto">
    <bread-crumb class="mb10" :breadcrumbTtem="breadcrumbTtem"/>
    <banner :bannerImg="require('~/assets/image/coupons/coupons.png')">
      <template v-slot:txt>
        <p class="size14 mt10 pb40 coupons_txt text_l lh15">{{$t("GlassesShop publishes promotions and coupon codes on this page. Our Customers can know what promotion is held or what sale will come soon by following our facebook, twitter or reading this page! Please come back and check often")}}</p>
      </template>
    </banner>
    <div class="coupon_items mt40">
        <div class="coupon_item h200 mb20 flex">
            <div class="coupon_pic mr15"><img :src="require('@/assets/image/coupons/coupons_1.png')" alt=""  class="img h100"/></div>
            <div class="coupon_info relative ptb10 plr10 spacing h100">
                <h3 class="first_title size20 mb10">30% Off Progressive Eyeglasses</h3>
                <h4 class="second_title size15 mb10">Terms &amp; Conditions:</h4>
                <p class="mb10">Progressive Glasses Sale</p>
                <p class="mb10">30% OFF entire order</p>
                <p class="mb10">No double discounts</p>
                <div class="coupon_code">
                    <div class="code mb10"><span>{{$t("Use Code")}}::</span> <span class="code_content gradients p5 inline-block pointer">101010</span></div>
                    <div class="expire_time"><span class="size14">{{$t("Expire Date")}}:<span> <span class="expire_date">2019.04.30</span> </span></span></div>
                </div>
            </div>
        </div>
        <div class="coupon_item h200 mb20 flex">
            <div class="coupon_pic mr15"><img :src="require('@/assets/image/coupons/coupons_2.png')" alt=""  class="img h100"/></div>
            <div class="coupon_info relative ptb10 plr10 spacing h100">
                <h3 class="first_title size20 mb10">30% Off Progressive Eyeglasses</h3>
                <h4 class="second_title size15 mb10">Terms &amp; Conditions:</h4>
                <p class="mb10">Progressive Glasses Sale</p>
                <p class="mb10">30% OFF entire order</p>
                <p class="mb10">No double discounts</p>
                <div class="coupon_code">
                    <div class="code mb10"><span>{{$t("Use Code")}}::</span> <span class="code_content gradients p5 inline-block pointer">NOSENDE1001</span></div>
                    <div class="expire_time"><span class="size14">{{$t("Expire Date")}}:<span> <span class="expire_date">2019.04.30</span> </span></span></div>
                </div>
            </div>
        </div>
        <div class="coupon_item h200 mb20 flex">
            <div class="coupon_pic mr15"><img :src="require('@/assets/image/coupons/coupons_4.png')" alt=""  class="img h100"/></div>
            <div class="coupon_info relative ptb10 plr10 spacing h100">
                <h3 class="first_title size20 mb10">30% Off Progressive Eyeglasses</h3>
                <h4 class="second_title size15 mb10">Terms &amp; Conditions:</h4>
                <p class="mb10">Progressive Glasses Sale</p>
                <p class="mb10">30% OFF entire order</p>
                <p class="mb10">No double discounts</p>
                <div class="coupon_code">
                    <div class="code mb10"><span>{{$t("Use Code")}}::</span> <span class="code_content gradients p5 inline-block pointer">NOSENDE1001</span></div>
                    <div class="expire_time"><span class="size14">{{$t("Expire Date")}}:<span> <span class="expire_date">2019.04.30</span> </span></span></div>
                </div>
            </div>
        </div>
        <div class="coupon_item h200 mb20 flex">
            <div class="coupon_pic mr15"><img :src="require('@/assets/image/coupons/coupons_3.png')" alt=""  class="img h100"/></div>
            <div class="coupon_info relative ptb10 plr10 spacing h100">
                <h3 class="first_title size20 mb10">30% Off Progressive Eyeglasses</h3>
                <h4 class="second_title size15 mb10">Terms &amp; Conditions:</h4>
                <p class="mb10">Progressive Glasses Sale</p>
                <p class="mb10">30% OFF entire order</p>
                <p class="mb10">No double discounts</p>
                <div class="coupon_code">
                    <div class="code mb10"><span>{{$t("Use Code")}}::</span> <span class="code_content gradients p5 inline-block pointer">NOSENDE1001</span></div>
                    <div class="expire_time"><span class="size14">{{$t("Expire Date")}}:<span> <span class="expire_date">2019.04.30</span> </span></span></div>
                </div>
            </div>
        </div>
        <div class="coupon_item h200 mb20 flex">
            <div class="coupon_pic mr15"><img :src="require('@/assets/image/coupons/coupons_5.png')" alt=""  class="img h100"/></div>
            <div class="coupon_info relative ptb10 plr10 spacing h100">
                <h3 class="first_title size20 mb10">30% Off Progressive Eyeglasses</h3>
                <h4 class="second_title size15 mb10">Terms &amp; Conditions:</h4>
                <p class="mb10">Progressive Glasses Sale</p>
                <p class="mb10">30% OFF entire order</p>
                <p class="mb10">No double discounts</p>
                <div class="coupon_code">
                    <div class="code mb10"><span>{{$t("Use Code")}}::</span> <span class="code_content gradients p5 inline-block pointer">NOSENDE1001</span></div>
                    <div class="expire_time"><span class="size14">{{$t("Expire Date")}}:<span> <span class="expire_date">2019.04.30</span> </span></span></div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import BreadCrumb from '~/components/common/Breadcrumb';
import Banner from '~/components/common/Banner';
import { spliteParams } from '~/utils/Utils';
export default {
  name: 'coupons',
  async asyncData({req, params, query, route}) {
    let arr = await spliteParams(route.fullPath);

    return {
      breadcrumbTtem: arr || []
    }
  },
  watch: {
      $route(to, from) {
          if(to.fullPath !== from.fullPath) {
              this.breadcrumbTtem = spliteParams(to.fullPath);
          }
      }
  },
  components: {
    BreadCrumb,
    Banner
  },
}
</script>

<style lang="scss" scoped>
.coupons_txt {
  border-bottom: 1px solid #a0a0a0;
}
.coupon_info {
  background: #fafafa;
  flex-grow: 1;
}
.expire_time,
.first_title {
  color: #43bcc9;
}
.coupon_code {
  position: absolute;
  top: 5%;
  right: 10%;
}
.code_content {
  border: 1px solid #333;
}
.coupon_pic {
  width: 280px;
}
</style>